<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <!-- import CSS -->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script type="text/javascript" src="../../../webjars/fw-web/main/common/vue-boot.js"></script>
</head>
<style>

</style>
<body>
<div id="app">
    <!--查询-->
    <el-row>
        <el-col :span="24">
            <el-form :inline="true" ref="paramData" :model="paramData" size="small" @submit.native.prevent>
                <el-form-item label="菜单名称">
                    <el-input v-model="paramData.menuName" placeholder="请输入菜单名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单编码">
                    <el-input v-model="paramData.menuCode" placeholder="请输入菜单编码" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-menuTreeDataicomenuTreeDatan-search" @click="onSearch">查询</el-button>
                </el-form-item>

            </el-form>
        </el-col>
    </el-row>
    <!--新增-->
    <el-row>
        <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" @click="addMenu" size="small">新增</el-button>
        </el-col>
    </el-row>

    <!--表格-->
    <el-container>
        <el-aside width="200px">
            <el-tree
                :data="menuTreeData"
                ref="menuTree"
                :props="treeProps"
                node-key="code"
                default-expanded-keys="['VROOT']"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
                highlight-current
                draggable @node-drop="handleDrop"
                :allow-drop="allowDrop"
                :allow-drag="allowDrag">
            </el-tree>
        </el-aside>
        <el-main>
            <el-table v-loading="loading" :data="tableData" style="width: 100%" highlight-current-row
                      row-class-name="row_padding" header-row-class-name="head_padding" border>
                <el-table-column label="菜单名称" prop="name" fixed="left" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="菜单编码" prop="code" width="140" show-overflow-tooltip></el-table-column>
                <el-table-column label="菜单路径" prop="url" show-overflow-tooltip></el-table-column>
                <el-table-column label="菜单图标" prop="icon" width="210" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <img alt="图片" v-if="scope.row.icon.indexOf('http') != -1" :src="scope.row.icon" alt="图标" style="width:20px;height:20px;border-radius:3px;"/>
                        <i v-else :class="'iconfont ' + scope.row.icon"></i>
                        <span style="margin-left: 10px">{{ scope.row.icon }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="叶子" prop="leaf" width="50" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-text="leafRender(scope.row.leaf)"></span>
                    </template>
                </el-table-column>
                <!--<el-table-column label="菜单状态" prop="status" width="80" align="center">
                    <template slot-scope="scope">
                        &lt;!&ndash;<span v-html="getStatusClass(scope.row.status)"></span><span
                            v-text="statusRender(scope.row.status)"></span>&ndash;&gt;
                    </template>
                </el-table-column>-->
                <el-table-column label="操作人" prop="editBy" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作时间" prop="editTime" width="140" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" fixed="right" width="160">
                    <template slot-scope="scope">
                        <el-button  @click.native.prevent="openDetail(scope.row)" type="text" size="small">
                            <i class="el-icon-view"></i>
                        </el-button>
                        <el-button @click.native.prevent="editDetail(scope.row)" type="text" size="small">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <!--<el-button @click.native.prevent="updateBusiStatus(scope.row)" type="text" size="small">
                            <span v-text="scope.row.busiStatus == '1' ? '停用' : '启用' "></span>
                        </el-button>-->
                        <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                            <i class="el-icon-delete"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 8px;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="paramData.currentPage"
                        :page-sizes="[5,10, 20, 50, 100]"
                        :page-size="paramData.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="paramData.total">
                </el-pagination>
            </div>
        </el-main>
    </el-container>

    <!--表单-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="handleDialogClose" class="customWidth" fullscreen>
        <el-form ref="menuForm" :model="menuForm" :rules="menuFormRules" label-width="80px" size="mini">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="menuForm.name" placeholder="请输入菜单名称" :maxlength="100" :disabled="formRead"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="菜单编码" prop="code">
                        <el-input v-model="menuForm.code" placeholder="请输入菜单编码" :maxlength="50" :disabled="formRead"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="叶子节点" prop="leaf">
                        <el-radio-group v-model="menuForm.leaf" :disabled="formRead">
                            <el-radio-button :label="0">否</el-radio-button>
                            <el-radio-button :label="1">是</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
            <el-col :span="24">
                <el-form-item v-if="menuForm.leaf == '1'" label="菜单路径" prop="menuUrl">
                    <el-input v-model="menuForm.url" placeholder="请输入菜单路径" :maxlength="600" :disabled="formRead"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="菜单图标" prop="icon">
                        <el-input v-if="useUrl == '1'" v-model="menuForm.icon" placeholder="请输入图标信息" style="width: 80%;" :maxlength="200" :disabled="formRead">
                            <el-button slot="append" icon="el-icon-search" @click="selectFile()" :disabled="formRead">选择文件</el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="模块名" prop="moduleName">
                        <el-input v-model="menuForm.moduleName" :maxlength="50" :disabled="formRead"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="所属角色">
                        <el-select v-model="selectRoles" placeholder="请选择角色（可多选）" style="width: 100%;" multiple :disabled="formRead">
                            <el-option
                                    v-for="item in rolelist"
                                    :key="item.roleCode"
                                    :label="item.roleName"
                                    :value="item.roleName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-row>
                <el-form-item label="菜单参数">
                    <el-input type="textarea" rows="5" v-model="menuForm.menuParams" placeholder='请填写标准的JSON字符，示例：{"name":"XX","age":20}' :maxlength="1000" :disabled="formRead"></el-input>
                </el-form-item>
            </el-row>-->
            <el-form-item>
                <el-button v-if="!formRead" type="primary" @click="save()" size="small">保存</el-button>
                <el-button v-if="!formRead" @click="dialogFormVisible = false" size="small">取消</el-button>
                <el-button v-if="formRead" @click="dialogFormVisible = false" size="small">返回</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--新增表单-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisibleAdd" @close="handleDialogClose" class="customWidth" fullscreen>
        <el-form ref="menuForm" :model="menuForm" :rules="menuFormRules" label-width="80px" size="mini">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="menuForm.name" placeholder="请输入菜单名称" :maxlength="100" :disabled="formRead"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="菜单编码" prop="code">
                        <el-input v-model="menuForm.code" placeholder="请输入菜单编码" :maxlength="50" :disabled="formRead"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="叶子节点" prop="leaf">
                        <el-radio-group v-model="menuForm.leaf" :disabled="formRead">
                            <el-radio-button :label="0">否</el-radio-button>
                            <el-radio-button :label="1">是</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--隐藏域-->
            <el-row>
                <el-input type="hidden" v-model="menuForm.parentId"></el-input>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item v-if="menuForm.leaf == '1'" label="菜单路径" prop="menuUrl">
                        <el-input v-model="menuForm.url" placeholder="请输入菜单路径" :maxlength="600" :disabled="formRead"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="菜单图标" prop="icon">
                        <el-input v-if="useUrl == '1'" v-model="menuForm.icon" placeholder="请输入文件" style="width: 80%;" :maxlength="200" :disabled="formRead">
                            <el-button slot="append" icon="el-icon-search" @click="selectFile()" :disabled="formRead">选择文件</el-button>
                        </el-input>
                        <el-select v-else v-model="menuForm.icon" placeholder="请选择图标字体" style="width: 50%;" :disabled="formRead">
                            <el-option v-for="item in iconlist" :key="item.code" :label="item.name" :value="item.code">
                                <i style="font-size: 18px !important; color: #201F35 !important;" :class="'iconfont ' + item.code">
                                    <span style="margin-left: 20px;" v-text="item.name"></span>
                                </i>
                            </el-option>
                        </el-select>
                        <el-radio-group v-model="useUrl" :disabled="formRead" style="width: 150px;">
                            <el-radio-button :label="1">图片</el-radio-button>
                            <el-radio-button :label="2">字体</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="模块名" prop="moduleName">
                        <el-input v-model="menuForm.moduleName" :maxlength="50" :disabled="formRead"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="所属角色">
                        <el-select v-model="selectRoles" placeholder="请选择角色（可多选）" style="width: 100%;" multiple :disabled="formRead">
                            <el-option
                                    v-for="item in rolelist"
                                    :key="item.roleCode"
                                    :label="item.roleName"
                                    :value="item.roleName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-row>
                <el-form-item label="菜单参数">
                    <el-input type="textarea" rows="5" v-model="menuForm.menuParams" placeholder='请填写标准的JSON字符，示例：{"name":"XX","age":20}' :maxlength="1000" :disabled="formRead"></el-input>
                </el-form-item>
            </el-row>-->
            <el-form-item>
                <el-button v-if="!formRead" type="primary" @click="newSave()" size="small">保存</el-button>
                <el-button v-if="!formRead" @click="dialogFormVisible = false" size="small">取消</el-button>
                <el-button v-if="formRead" @click="dialogFormVisible = false" size="small">返回</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

</body>

<!-- import Vue before Element -->
<!--<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
&lt;!&ndash; import JavaScript &ndash;&gt;
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script src="./menu.js" type="text/javascript"></script>
</html>